<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>

<body>
<select id="ta">
    <option value="start">start</option>
    <option value="end">end</option>
    <option value="middle">center</option>
</select>
<select id="select"></select>
<svg>
    <path stroke="green" d="M 0 100.5 500 100.5 M 140 0 v 200" />
    <text id="text" x="140" y="100" fill="red" font-size="50">慕课网</text>
    <rect id="rect" stroke="blue" fill="none"></rect>
</svg>
<script>
    var values = "auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | text-top | text-bottom".split(' | ');
    values.forEach(function(value) {
        var opt = document.createElement('option');
        opt.value = opt.textContent = value;
        select.appendChild(opt);
    });
    select.addEventListener('input', function() {
        text.setAttribute('dominant-baseline', select.value);
        var box = text.getBBox();
        rect.setAttribute('x', box.x);
        rect.setAttribute('y', box.y);
        rect.setAttribute('width', box.width);
        rect.setAttribute('height', box.height);
    });
    ta.addEventListener('input', function() {
        text.setAttribute('text-anchor', ta.value);
    });
</script>
</body>

</html>